<script setup lang="ts">
import { ref, onBeforeMount, inject } from 'vue';
import { useStore } from '@store/index'
import { searchMusic, searchSinger, searchMusicList, searchAlbum, searchUser } from '../../utils/api';
import { popMessageKey, popMessage, PageInfo, Music, UserDto, switchLoginModelShowKey, MusicList } from '@/type'
import { storeToRefs } from 'pinia';
import CommonPagenation from '../Common/CommonPagenation.vue'
import CommonMusicTable from '../Common/CommonMusicTable.vue'
import SearchSinger from './SearchSinger.vue'
import SearchAlbum from './SearchAlbum.vue'
import SearchMusicList from './SearchMusicList.vue'
import SearchUser from './SearchUser.vue'
const popMessage = inject(popMessageKey) as popMessage
const store = useStore()
const isLogin = storeToRefs(store).isLogin
const showLoginModel = inject(switchLoginModelShowKey) as () => void


const selectedItemIndex = ref(0) // 初始选中单曲
const items = ['单曲', '歌手', '专辑', '歌单', '用户']
const props = defineProps(['kw'])
const keyword = ref(props.kw)
const showKeyword = ref(props.kw)
const currentPage = ref(1)
const pageSize = ref(6)
// 单曲搜索用
const musicList = ref<PageInfo<Music>>()
const singerList = ref<PageInfo<any>>()
// 歌手搜索用
const singerList2 = ref<PageInfo<any>>()
// 专辑搜索用
const albumList = ref<PageInfo<MusicList>>()
// 歌单搜索用
const musicListList = ref<PageInfo<any>>()
// 用户搜索用
const userList = ref<PageInfo<UserDto>>()

// 初始keyword 用于重置currentPage
let nowKeyWord = ''
let nowselectedItemIndex = 0
const selectItem = (index: number) => {
    if (index == 4 && isLogin.value !== 1) {
        showLoginModel()
        popMessage('未登录', 'error')
        return
    }
    selectedItemIndex.value = index
    search()
    getTotal(selectedItemIndex.value)
}

// 计算单位
const unit = (index: number) => {
    switch (index) {
        case 0:
            return '首'
        case 1:
            return '位'
        case 2:
            return '张'
        case 3:
            return '个'
        case 4:
            return '位'
        default:
            return '个'
    }
}



// 搜索单曲
const searchmusicWarp = () => {
    searchMusic(keyword.value, currentPage.value, pageSize.value).then((res) => {
        if (res.data.code == 1) {
            musicList.value = res.data.data.musicList
            singerList.value = res.data.data.userList
        }
    })
}

// 搜索歌手
const searchSingerWarp = () => {
    searchSinger(keyword.value, currentPage.value, pageSize.value).then((res) => {
        if (res.data.code == 1) {
            singerList2.value = res.data.data

        }
    })
}

// 搜索歌单
const searchMusicListWarp = () => {
    searchMusicList(keyword.value, currentPage.value, pageSize.value).then((res) => {
        if (res.data.code == 1) {
            musicListList.value = res.data.data

        }
    })
}
// 搜索专辑
const searchAlbumWarp = () => {
    searchAlbum(keyword.value, currentPage.value, pageSize.value).then((res) => {
        if (res.data.code == 1) {
            albumList.value = res.data.data

        }
    })
}
// 搜索用户
const searchUserWarp = () => {
    searchUser(keyword.value, currentPage.value, pageSize.value).then((res) => {
        if (res.data.code == 1) {
            userList.value = res.data.data
        }
    })
}
// 搜索
const search = () => {
    if (nowKeyWord != keyword.value) {
        currentPage.value = 1
        nowKeyWord = keyword.value
    }
    if (nowselectedItemIndex != selectedItemIndex.value) {
        currentPage.value = 1
        nowselectedItemIndex = selectedItemIndex.value
    }
    if (keyword.value === null || keyword.value === undefined || keyword.value === '') {
        popMessage("搜索不能为空", 'error')
        return
    }

    showKeyword.value = keyword.value
    switch (selectedItemIndex.value) {
        case 0:
            searchmusicWarp()
            break
        case 1:
            searchSingerWarp()
            break
        case 2:
            searchAlbumWarp()
            break
        case 3:
            searchMusicListWarp()
            break
        case 4:
            searchUserWarp()
            break
    }

}
const lastPage = (type: 'user' | 'musicList' | 'music' | 'singer' | 'album') => {
    if (musicList.value === undefined) return
    switch (type) {
        case 'user':
            if (userList.value?.hasPreviousPage) {
                currentPage.value--
            } else {
                return popMessage("已经是第一页了喵~", 'info')
            }
            break;
        case 'musicList':
            if (musicListList.value?.hasPreviousPage) {
                currentPage.value--
            } else {
                return popMessage("已经是第一页了喵~", 'info')
            }
            break;
        case 'music':
            if (musicList.value?.hasPreviousPage) {
                currentPage.value--
            } else {
                return popMessage("已经是第一页了喵~", 'info')
            }
            break;
        case 'singer':
            console.log(singerList.value);
            if (singerList2.value?.hasPreviousPage) {
                currentPage.value--
            } else {
                return popMessage("已经是第一页了喵~", 'info')
            }
            break;
        case 'album':
            if (albumList.value?.hasPreviousPage) {
                currentPage.value--
            } else {
                return popMessage("已经是第一页了喵~", 'info')
            }
            break;
    }
    search()
}
const nextPage = (type: 'user' | 'musicList' | 'music' | 'singer' | 'album') => {
    if (musicList.value === undefined) return
    switch (type) {
        case 'user':
            if (userList.value?.hasNextPage) {
                currentPage.value++
            } else {
                return popMessage("已经是最后一页了喵~", 'info')
            }
            break;
        case 'musicList':
            if (musicListList.value?.hasNextPage) {
                currentPage.value++
            } else {
                return popMessage("已经是最后一页了喵~", 'info')
            }
            break;
        case 'music':
            if (musicList.value?.hasNextPage) {
                currentPage.value++
            } else {
                return popMessage("已经是最后一页了喵~", 'info')
            }
            break;
        case 'singer':
            if (singerList2.value?.hasNextPage) {
                currentPage.value++
            } else {
                return popMessage("已经是最后一页了喵~", 'info')
            }
            break;
        case 'album':
            if (albumList.value?.hasNextPage) {
                currentPage.value++
            } else {
                return popMessage("已经是最后一页了喵~", 'info')
            }
            break;
    }
    search()
}

const changePageList = {
    musicListChangePage: (page: number | 'next' | 'last') => {
        switch (page) {
            case 'next':
                nextPage("music")
                break
            case 'last':
                lastPage("music")
                break
            default:
                currentPage.value = page
                search()
                break
        }
    },
    userListChangePage: (page: number | 'next' | 'last') => {
        switch (page) {
            case 'next':
                nextPage("user")
                break
            case 'last':
                lastPage("user")
                break
            default:
                currentPage.value = page
                search()
                break
        }
    },
    musicListListChangePage: (page: number | 'next' | 'last') => {
        switch (page) {
            case 'next':
                nextPage("musicList")
                break
            case 'last':
                lastPage("musicList")
                break
            default:
                currentPage.value = page
                search()
                break
        }
    },
    singerListChangePage: (page: number | 'next' | 'last') => {
        switch (page) {
            case 'next':
                nextPage("singer")
                break
            case 'last':
                lastPage("singer")
                break
            default:
                currentPage.value = page
                search()
                break
        }
    },
    albumListChangePage: (page: number | 'next' | 'last') => {
        switch (page) {
            case 'next':
                nextPage("album")
                break
            case 'last':
                lastPage("album")
                break
            default:
                currentPage.value = page
                search()
                break
        }
    }
}
// const searchCount = ref(0)
const getTotal = (index: number) => {
    switch (index) {
        case 0:
            return musicList.value !== undefined ? musicList.value.total : 0
        case 1:
            return singerList2.value !== undefined ? singerList2.value.total : 0
        case 2:
            return albumList.value !== undefined ? albumList.value.total : 0
        case 3:
            return musicListList.value !== undefined ? musicListList.value.total : 0
        case 4:
            return userList.value !== undefined ? userList.value.total : 0
        default:
            return 0

    }
}

onBeforeMount(() => {
    console.log(keyword.value === '');
    search()
})

</script>
<template>
    <div class="main">
        <div class="warp">
            <div class="search-top">
                <div class="search-top-input">
                    <input type="text" v-model="keyword" @keyup.enter="search">
                    <span @click="search"><img src="../../assets/search.svg"></span>
                </div>
            </div>
            <div class="tips">
                搜索"{{ showKeyword }}", 找到
                <i class="searchCount" style="font-style: normal; color: #C20C0C;">{{ getTotal(selectedItemIndex) }}</i>
                {{ unit(selectedItemIndex) + items[selectedItemIndex] }}
            </div>
            <ul class="search-list">
                <li v-for="item, index in items" :key="index"
                    :class="{ selected: index === selectedItemIndex, first: index === 0, last: index === items.length - 1 }"
                    @click="selectItem(index)">
                    <em>{{ item }}</em>
                </li>
            </ul>
            <CommonMusicTable v-if="musicList !== undefined && selectedItemIndex === 0 && singerList" type-id="-1"
                :my-music="false" model="search" :music-list="musicList.list" :singer="singerList.list"
                :page-size="pageSize" />
            <SearchSinger v-if="singerList2 !== undefined && selectedItemIndex === 1" :page-info="singerList2" />
            <SearchAlbum v-if="albumList !== undefined && selectedItemIndex === 2" :page-info="albumList" />
            <SearchMusicList v-if="musicListList !== undefined && musicListList !== null && selectedItemIndex === 3"
                :page-info="musicListList" />
            <SearchUser v-if="userList !== undefined && selectedItemIndex === 4" :page-info="userList" />
            <!-- 单曲分页栏 -->
            <CommonPagenation v-if="musicList !== undefined && selectedItemIndex === 0" :currentPage="currentPage"
                :page-info="musicList" :change-page="changePageList.musicListChangePage" />
            <!-- 歌手分页栏 -->
            <CommonPagenation v-if="singerList2 !== undefined && selectedItemIndex === 1" :currentPage="currentPage"
                :page-info="singerList2" :change-page="changePageList.singerListChangePage" />
            <!-- 专辑分页栏 -->
            <CommonPagenation v-if="albumList !== undefined && selectedItemIndex === 2" :currentPage="currentPage"
                :page-info="albumList" :change-page="changePageList.albumListChangePage" />
            <!-- 歌单分页栏 -->
            <CommonPagenation v-if="musicListList !== undefined && musicListList !== null && selectedItemIndex === 3"
                :currentPage="currentPage" :page-info="musicListList"
                :change-page="changePageList.musicListListChangePage" />
            <!-- 用户分页栏 -->
            <CommonPagenation v-if="userList !== undefined && selectedItemIndex === 4" :currentPage="currentPage"
                :page-info="userList" :change-page="changePageList.userListChangePage" />

        </div>
    </div>
</template>
<style scoped lang="css">
.main {
    width: 100%;
    height: 100%;
}

.warp {
    padding: 30px;
    background-color: #fff;

}

.warp .search-top {
    display: flex;
    justify-content: center;
}

.search-top .search-top-input {
    display: flex;
    height: 40px;
    width: 420px;
    border: 1px solid #D2D2D2;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(180, 180, 180, 0.5) inset;
}

.search-top .search-top-input input {
    height: 12px;
    width: 80%;
    margin: 14px 20px;
    border: none;
    outline: none;
    font-size: 12px;
}

.search-top .search-top-input span {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 50px;
    height: 40px;
    border-left: 1px solid #BDBDBD;
    background-color: #EDEDED;
    background-image: radial-gradient(circle at 25px 20px, #fff, #F9F9F9);
    border-radius: 0 8px 8px 0;
}

.search-top-input span img {
    width: 20px;
    height: 20px;
    margin: 10px 0;
}

.warp .tips {
    margin: 20px 0 17px 0;
    font-size: 12px;
    color: #999;
}

.search-list {
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
}

.search-list li {
    cursor: pointer;
    display: block;
    display: flex;
    justify-content: center;
    height: 36px;
    /* width: 110px; */
    width: 20%;
    background-image: linear-gradient(to bottom, #F7F7F7, #fff);
    border-top: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
    /* box-shadow: 1px 2px 3px 4px rgba(204, 204, 204, 0.5) inset; */
}

.search-list li:hover {
    border-top: 2px solid #D13030;
}

.search-list .selected {
    border-top: 2px solid #D13030;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: none;
}

.search-list li em {
    display: block;
    font-style: normal;
    margin: auto 0;
}

.first {
    border-left: 1px solid #ccc;
}

.last {
    border-right: 1px solid #ccc;
}
</style>
